<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>props</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .calling-card {
            width: 260px;
            height: 140px;
            background-color: #fff;
            box-shadow: 0 0 10px #ccc;
            margin: 50px auto;
            border-radius: 20px;
            padding: 0 10px;
            overflow: hidden;
            position: relative;
        }

        .calling-card.active {
            background-color: skyblue;
            color: #fff;
        }

        .name {
            font-size: 18px;
            margin-top: 20px;
        }

        div {
            font-size: 12px;
            margin: 5px 0;
        }

        .choose {
            border: 1px dashed red;
            text-align: center;
            padding: 5px 0;
        }

        .choose.choosed {
            border-color: #fff;
        }

        .card-container {
            justify-content: center;
            display: flex;
            width: 1000px;
            margin: 0 auto;
        }

        .avator {
            position: absolute;
            top: 20px;
            right: 20px;
            width: 50px;
            height: 50px;
            border-radius: 50%;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="card-container">
            <calling-card :name="name" :company="company" :email="email" :date="date">
            </calling-card>

            <calling-card name="李四" company="京东互联网科技有限公司" email="789456@qq.com" date="2021-01-01"></calling-card>
            <calling-card name="李四" company="京东互联网科技有限公司" email="789456@qq.com" date="2021-01-01"></calling-card>
        </div>

    </div>


    <template id="calling-card">
        <div class="calling-card" :class="{'active': isShow}" @click="isShow=!isShow">
            <h2 class="name">{{name}}</h2>
            <div class="company">{{company}}</div>
            <div class="email">{{email}} / {{date}}</div>
            <img class="avator" :src="avator" />
            <div v-show="isShow" class="choose" :class="{'choosed': isShow}" @click="isShow=!isShow">您选择了{{name}}</div>
        </div>
    </template>


    <!-- 引入vue -->
    <script src=" https://unpkg.com/vue@3/dist/vue.global.js">
    </script>
    <script>

        const { createApp, ref, onMounted, nextTick, getCurrentInstance } = Vue;
        // 创建Vue实例
        const app = createApp({
            setup() {
                const name = ref('张三');
                const company = ref('飞秋互联网科技有限公司');
                const email = ref('123456@qq.com');
                const date = ref('2021-01-01');
                return {
                    name,
                    company,
                    email,
                    date
                }
            }
        })

        // 全局注册组件
        app.component('calling-card', {
            setup() {
                const isShow = ref(false);
                return {
                    isShow
                }
            },
            props: {
                name: {
                    type: String,
                    required: true
                },
                company: {
                    type: String,
                    required: true
                },
                email: {
                    type: String
                },
                date: {
                    type: String
                },
                avator: {
                    type: String,
                    required: true,
                    default: 'https://picsum.photos/id/33/100/100'
                }

            },
            template: "#calling-card"
        })

        // 挂载到dom
        app.mount('#app')
    </script>
</body>

</html>